import 'package:flutter/material.dart';

void main() {
  runApp(const HomePage());
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "My France",
      home: Main(),
    );
  }
}

class Main extends StatefulWidget {
  const Main({super.key});

  @override
  State<Main> createState() => _MainState();
}

class _MainState extends State<Main> {
  int _selectedIndex = 0;
  int index = -1;

  final List locations = [
    {"image": "scene_1.jpg", "name": "巴黎埃菲尔铁塔"},
    {"image": "scene_2.jpg", "name": "里昂老城区"},
    {"image": "scene_3.jpg", "name": "马赛旧港"},
    {"image": "scene_4.jpg", "name": "尼斯天使湾"},
    {"image": "scene_5.jpg", "name": "斯特拉斯堡大教堂"},
    {"image": "scene_6.jpg", "name": "波尔多红酒庄园"},
    {"image": "scene_7.jpg", "name": "普罗旺斯薰衣草"},
    {"image": "scene_8.jpg", "name": "圣米歇尔山"},
    {"image": "scene_9.jpg", "name": "凡尔赛宫"},
    {"image": "scene_10.jpg", "name": "卢瓦尔河谷城堡乐奕"},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          // 左侧导航栏 (宽度占比2)
          Expanded(
            flex: 2,
            child: Padding(
              padding: const EdgeInsets.only(top: 35),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        width: 80,
                        height: 80,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(100),
                          color: Colors.white,
                          boxShadow: const [
                            BoxShadow(
                              color: Colors.grey,
                              offset: Offset(0, 0),
                              blurRadius: 10,
                            )
                          ],
                        ),
                        child: Image.asset(
                          "assets/icons/art_icon_la_tour_eiffel.png",
                          width: 80,
                        ),
                      ),
                      const SizedBox(width: 12),
                      const Text(
                        "My\nFrance",
                        style: TextStyle(fontSize: 24),
                      )
                    ],
                  ),
                  const SizedBox(height: 18),
                  _buildMenuItem(
                      "assets/icons/icon_home_outline.png", "Home", 0),
                  _buildMenuItem(
                      "assets/icons/icon_map_outline.png", "Travel", 1),
                  _buildMenuItem("assets/icons/icon_account_circle_outline.png",
                      "Account", 2),
                ],
              ),
            ),
          ),

          // 主内容区域
          _selectedIndex == 2
              ? Expanded(
            flex: 8,
            child: AccountPage(
              onBack: () => setState(() => _selectedIndex = 0),
            ),
          )
              : Expanded(
            flex: 8,
            child: Row(
              children: [
                // 中间日记网格区域 (宽度占比5)
                Expanded(
                  flex: 5,
                  child: Padding(
                    padding: const EdgeInsets.all(16),
                    child: SingleChildScrollView(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const Text(
                            "Diaries",
                            style: TextStyle(
                              fontSize: 24,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          const SizedBox(height: 19),
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              // 左侧列 (0-4)
                              Expanded(
                                flex: 1,
                                child: Column(
                                  children: [
                                    for (int i = 0; i < 5; i++)
                                      _buildImageItem(i),
                                  ],
                                ),
                              ),
                              const SizedBox(width: 10),
                              // 右侧列 (5-9)
                              Expanded(
                                flex: 1,
                                child: Column(
                                  children: [
                                    const SizedBox(height: 35),
                                    for (int i = 5; i < 10; i++)
                                      _buildImageItem(i),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
                // 右侧装饰区 (宽度占比3)
                Expanded(
                  flex: 3,
                  child: Container(
                    padding: const EdgeInsets.only(right: 20),
                    child: index == -1
                        ? _buildWelcomeWidget()
                        : _buildDetailWidget(),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildImageItem(int i) {
    return GestureDetector(
      onTap: () {
        setState(() {
          index = index == i ? -1 : i;
        });
      },
      child: Container(
        margin: const EdgeInsets.all(10),
        width: double.infinity,
        decoration: BoxDecoration(
          border: Border.all(
            color: index == i ? Colors.black12 : Colors.white,
            width: 3,
          ),
        ),
        child: Column(
          children: [
            Image.asset(
              "assets/images/location_image/${locations[i]['image']}",
              fit: BoxFit.cover,
            ),
            Text(locations[i]['name']!),
          ],
        ),
      ),
    );
  }

  Widget _buildMenuItem(String iconPath, String text, int menuIndex) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _selectedIndex = menuIndex;
        });
      },
      child: Container(
        height: 110,
        color: _selectedIndex == menuIndex ? Colors.grey : null,
        child: Row(
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 35, top: 10),
              child: Image.asset(iconPath, width: 55),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 11, left: 15),
              child: Text(
                text,
                style: const TextStyle(
                  fontSize: 25,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _buildWelcomeWidget() {
    return Stack(
      children: [
        Positioned(
          top: 200,
          left: 70,
          child: Opacity(
            opacity: 0.5,
            child: Image.asset(
              "assets/icons/art_icon_la_tour_eiffel.png",
              width: 180,
            ),
          ),
        ),
        Positioned(
          top: 220,
          left: 100,
          child: Image.asset(
            "assets/icons/art_icon_arc_de_triomphe.png",
            width: 180,
          ),
        ),
        const Positioned(
          top: 400,
          left: 35,
          child: Text(
            "Welcome to France",
            style: TextStyle(fontSize: 35),
          ),
        )
      ],
    );
  }

  Widget _buildDetailWidget() {
    final location = locations[index];
    return SingleChildScrollView(
      child: Column(
        children: [
          Stack(
            children: [
              Image.asset(
                "assets/images/location_image/${location['image']}",
                width: double.infinity,
              ),
              Positioned(
                  right: 399,
                  child: GestureDetector(
                    onTap: () => setState(() => index = -1),
                    child: Image.asset(
                      "assets/icons/icon_close.png",
                      height: 35,
                      width: 35,
                    ),
                  )),
              Positioned(
                left: 399,
                child: Image.asset(
                  "assets/icons/icon_star_filled_gold.png",
                  height: 35,
                  width: 35,
                ),
              )
            ],
          ),
          const SizedBox(height: 20),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                location['name']!,
                style:
                const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
              Image.asset(
                "assets/icons/icon_copy.png",
                width: 30,
                height: 30,
              )
            ],
          ),
          const Padding(
            padding: EdgeInsets.only(right: 203),
            child: Text("Published Wang April 5,2025 10:48 AM"),
          ),
          const Padding(
            padding: EdgeInsets.all(16),
            child: Text(
              "The Iconic Eiffel TowerParis, FranceStanding tall at 330 meters (1,083 ft), the Eiffel Tower is more than just Paris' most recognizable landmark—it's a global symbol of romance and engineering brilliance. Built by Gustave Eiffel for the 1889 World's Fair, this iron lattice structure was initially controversial but now welcomes nearly 7 million visitors annually.Did you know?• It was the world's tallest man-made structure for 41 years• The tower  up to 15 cm in summer due to thermal expansion• There are 1,665 steps to the top (though elevators are available!)By day, its intricate ironwork dazzles against the Paris skyline. By night, 20,000 golden lights make it sparkle every hour—a magical sight best enjoyed from the Champ de Mars gardens with a croissant in hand.The Eiffel Tower is the Empire State Building after a French diet.—David Letterman",
              style: TextStyle(fontSize: 18),
            ),
          )
        ],
      ),
    );
  }
}

class AccountPage extends StatefulWidget {
  final VoidCallback onBack;
  const AccountPage({super.key, required this.onBack});

  @override
  State<AccountPage> createState() => _AccountPageState();
}

class _AccountPageState extends State<AccountPage> {
  bool showCustomPage = false;

  Widget _buildWelcomeWidget() {
    return Stack(
      children: [
        Positioned(
          top: 200,
          left: 100,
          child: Opacity(
            opacity: 0.5,
            child: Image.asset(
              "assets/icons/art_icon_la_tour_eiffel.png",
              width: 180,
            ),
          ),
        ),
        Positioned(
          top: 220,
          left: 120,
          child: Image.asset(
            "assets/icons/art_icon_arc_de_triomphe.png",
            width: 180,
          ),
        ),
        const Positioned(
          top: 400,
          left: 50,
          child: Text(
            "Welcome to France",
            style: TextStyle(fontSize: 35),
          ),
        )
      ],
    );
  }

  Widget _buildCustomPage() {
    return Row(
      children: [
        Text("Sign in/up")
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          Expanded(
            flex: 6,
            child: Container(
              color: Colors.white,
              child: Column(
                children: [
                  const SizedBox(height: 200),
                  Image.asset(
                    "assets/icons/icon_account_circle_outline.png",
                    width: 160,
                    height: 160,
                  ),
                  const SizedBox(height: 30),
                  TextButton(
                    onPressed: () {
                      setState(() {
                        showCustomPage = true;
                      });
                    },
                    style: TextButton.styleFrom(
                      side: const BorderSide(color: Colors.black),
                      foregroundColor: Colors.black,
                    ),
                    child: const Text(
                      "Join us now",
                      style: TextStyle(fontSize: 30),
                    ),
                  ),
                  const SizedBox(height: 15),
                  const Text(
                    "to discover more sights of France",
                    style: TextStyle(fontSize: 20),
                  )
                ],
              ),
            ),
          ),
          Expanded(
            flex: 4,
            child: AnimatedSwitcher(
              duration: const Duration(milliseconds: 300),
              child: showCustomPage
                  ? _buildCustomPage()
                  : _buildWelcomeWidget(),
            ),
          ),
        ],
      ),
    );
  }
}